<template>
  <view class="bg-gradient-to-br from-[#e3f2fd] to-[#f0f8ff] text-[#333] leading-[1.6] min-h-screen pb-[20rpx]">
    <view class="container max-w-[750rpx] mx-auto">
      <PageHeader title="" :showBack="true" :onlyBack="true" />
     
      <!-- 页面标题 -->
      <view
        class="sticky top-0 z-[2] text-center py-[30rpx] px-[20rpx] bg-gradient-to-r from-[#2196F3] to-[#21CBF3] rounded-b-[20rpx] shadow-[0_15rpx_30rpx_rgba(33,150,243,0.25)] relative overflow-hidden mb-[30rpx] text-white"
      >
        <view
          class="absolute top-0 left-0 w-full h-[5rpx] bg-[rgba(255,255,255,0.5)]"
        ></view>
        <view
          class="page-title text-[36rpx] mb-[15rpx] flex items-center justify-center gap-[15rpx]"
        >
          <IconFont name="icon-crown" />
          <text>高薪优质岗位</text>
        </view>
        <view
          class="page-subtitle text-[20rpx] max-w-[600rpx] mx-auto mb-[25rpx] opacity-[0.95]"
        >
          精选高薪、高福利、高发展潜力的优质岗位，助您实现职业飞跃
        </view>

        <view
          class="stats flex justify-center gap-[40rpx] mt-[25rpx] flex-wrap"
        >
          <view
            v-for="stat in stats"
            :key="stat.id"
            class="stat-item text-center p-[15rpx] bg-[rgba(255,255,255,0.15)] rounded-[15rpx] backdrop-blur-[5rpx] min-w-[150rpx]"
          >
            <view class="stat-value text-[32rpx] font-bold mb-[5rpx]">{{
              stat.value
            }}</view>
            <view class="stat-label text-[20rpx] opacity-[0.9]">{{
              stat.label
            }}</view>
          </view>
        </view>
      </view>

      <!-- 工作列表 -->
      <view
        class="mx-[20rpx]"
      >
        <!-- <view
          class="section-header p-[25rpx] bg-gradient-to-r from-[#2196F3] to-[#21CBF3] text-white flex items-center gap-[15rpx]"
        >
          <IconFont name="icon-bolt" />
          <view class="section-title text-[28rpx] font-bold">最新高薪岗位</view>
        </view> -->

        <view class="job-list">
          <view
            v-for="(job, index) in jobs"
            :key="job.id"
            class="mb-[20rpx] bg-white shadow-[0_10rpx_30rpx_rgba(0,0,0,0.08)] rounded-[20rpx] flex p-[25rpx] border-b border-[#eee] transition-all duration-300 cursor-pointer relative"
            :class="{ 'border-0': index === jobs.length - 1 }"
            @click="handleJobClick(job.title)"
          >
            
            <view class="absolute top-[20rpx] right-[25rpx] text-[22rpx] px-[20rpx] py-[8rpx] rounded-[16rpx] font-medium bg-gradient-to-r from-[#e3f2fd] to-[#bbdefb] text-[#2196F3]">{{ job.badge }}</view>

            <view
              class="job-img w-[100rpx] h-[100rpx] rounded-[15rpx] bg-gradient-to-br from-[#2196F3] to-[#21CBF3] flex items-center justify-center text-white text-[40rpx] flex-shrink-0 mr-[25rpx]"
            >
              <IconFont :name="job.icon" />
            </view>
            <view class="job-content flex-1">
              <view
                class="job-title text-[28rpx] text-[#2196F3] mb-[10rpx] font-bold"
              >
                {{ job.title }}
              </view>
              <view
                class="job-company text-[24rpx] text-[#555] mb-[15rpx] flex items-center gap-[8rpx]"
              >
                <IconFont font-class-name="iconfont" class-prefix="icon" name="building" size="12" />
                <text>{{ job.company }}</text>
              </view>
              <view
                class="job-pay text-[28rpx] font-bold text-[#ff5722] mb-[15rpx]"
              >
                {{ job.pay }}
              </view>

              <view class="job-details flex gap-[25rpx] mb-[15rpx] flex-wrap">
                <view
                  v-for="(detail, i) in job.details"
                  :key="i"
                  class="detail-item flex items-center gap-[8rpx] text-[#555]"
                >
                  <IconFont :name="detail.icon" v-if="detail.icon" />
                  <text class="text-[20rpx]">{{ detail.value }}</text>
                </view>
              </view>

              <view class="job-desc text-[#555] mb-[20rpx] leading-[1.7]">
                {{ job.desc }}
              </view>

              <view class="job-tags flex flex-wrap gap-[10rpx] mb-[20rpx]">
                <view
                  v-for="(tag, i) in job.tags"
                  :key="i"
                  class="tag bg-[#e3f2fd] text-[#2196F3] px-[15rpx] py-[6rpx] rounded-[20rpx] text-[18rpx] font-medium"
                >
                  {{ tag }}
                </view>
              </view>
              
              <nut-button 
                type="primary"
                size="small"
                @click.stop="handleApplyJob(job.title)"
              >
                <!-- <IconFont name="icon-paper-plane" /> -->
                立即申请
              </nut-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
// import { Button as nutButton } from '@nutui/nutui-taro'

// 统计数据
const stats = ref([
  { id: 1, value: '¥8K-35K', label: '月薪范围' },
  { id: 2, value: '86%', label: '五险一金' },
  { id: 3, value: '124', label: '在招岗位' },
  // { id: 4, value: '58', label: '名企招聘' }
])

// 特色功能数据
const features = ref([
  {
    id: 1,
    title: "名企直招",
    desc: "世界500强企业、行业龙头公司、知名互联网企业直接招聘",
    icon: "icon-gem",
    btnText: "查看名企",
    btnIcon: "",
  },
  {
    id: 2,
    title: "高薪岗位",
    desc: "月薪15K+优质岗位，高额年终奖，股权激励，绩效奖金",
    icon: "icon-chart-line",
    btnText: "查看高薪",
    btnIcon: "icon-search-dollar",
  },
  {
    id: 3,
    title: "海外机会",
    desc: "海外高薪工作机会，国际化工作环境，跨文化职业发展",
    icon: "icon-globe-asia",
    btnText: "海外职位",
    btnIcon: "icon-plane",
  },
]);

// 工作列表数据
const jobs = ref([
  {
    id: 1,
    title: "高级前端工程师",
    company: "科技前沿有限公司",
    pay: "¥25K-35K·14薪",
    badge: "急聘",
    icon: "icon-laptop-code",
    details: [
      { icon: "locationg3", value: "北京·海淀区" },
      { icon: "", value: "本科及以上" },
      { icon: "", value: "3-5年经验" },
    ],
    desc: "负责公司核心产品的前端架构设计与开发，优化前端性能，带领前端团队进行技术攻关。要求精通Vue/React框架，有大型项目经验。",
    tags: ["五险一金", "年终奖金", "弹性工作", "带薪年假", "股票期权"],
  },
  {
    id: 2,
    title: "金融数据分析师",
    company: "国际金融集团",
    pay: "¥20K-30K·16薪",
    badge: "热门",
    icon: "icon-chart-bar",
    details: [
      { icon: "locationg3", value: "上海·浦东新区" },
      { icon: "", value: "硕士及以上" },
      { icon: "", value: "5年以上经验" },
    ],
    desc: "负责金融数据建模与分析，构建风险评估模型，为投资决策提供数据支持。要求精通Python/R，熟悉机器学习算法，有CFA/FRM证书优先。",
    tags: ["六险二金", "高额奖金", "带薪假期", "海外培训"],
  },
  {
    id: 3,
    title: "AI算法工程师",
    company: "未来科技研究院",
    pay: "¥30K-45K·15薪",
    badge: "新职",
    icon: "icon-robot",
    details: [
      { icon: "locationg3", value: "深圳·南山区" },
      { icon: "", value: "博士优先" },
      { icon: "", value: "3年以上经验" },
    ],
    desc: "负责AI算法研发与优化，参与计算机视觉、自然语言处理等前沿领域研究，推动AI技术在产品中的落地应用。",
    tags: ["科研经费", "国际会议", "弹性工作", "人才公寓", "股权激励"],
  },
]);

// 企业数据
const companies = ref([
  { id: 1, name: "腾讯科技", logo: "TX", jobs: 32 },
  { id: 2, name: "阿里巴巴", logo: "AL", jobs: 28 },
  { id: 3, name: "华为技术", logo: "HW", jobs: 45 },
  { id: 4, name: "百度科技", logo: "BD", jobs: 19 },
  { id: 5, name: "京东集团", logo: "JD", jobs: 26 },
  { id: 6, name: "小米科技", logo: "XM", jobs: 21 },
]);

// 底部链接
const footerLinks = ref([
  { id: 1, title: "关于我们" },
  { id: 2, title: "加入我们" },
  { id: 3, title: "隐私政策" },
  { id: 4, title: "用户协议" },
  { id: 5, title: "帮助中心" },
]);

// 返回按钮
const handleBack = () => {
  Taro.showToast({
    title: "返回首页",
    icon: "none",
    duration: 2000,
  });
  // 实际项目中使用：Taro.navigateBack()
};

// 搜索功能
const handleSearch = () => {
  Taro.showToast({
    title: "打开搜索页面",
    icon: "none",
    duration: 2000,
  });
};

// 个人中心
const handleUserCenter = () => {
  Taro.showToast({
    title: "打开个人中心",
    icon: "none",
    duration: 2000,
  });
};

// 特色功能点击
const handleFeatureClick = (title) => {
  Taro.showToast({
    title: `查看${title}相关内容`,
    icon: "none",
    duration: 2000,
  });
};

// 工作卡片点击
const handleJobClick = (title) => {
  Taro.showToast({
    title: `查看${title}详情`,
    icon: "none",
    duration: 2000,
  });
};

// 申请工作
const handleApplyJob = (title) => {
  Taro.showToast({
    title: `您已申请"${title}"职位！\n招聘经理将在24小时内与您联系。`,
    icon: "none",
    duration: 3000,
  });
};

// 查看更多企业
const handleViewMoreCompanies = () => {
  Taro.showToast({
    title: "查看更多招聘企业",
    icon: "none",
    duration: 2000,
  });
};

// 企业卡片点击
const handleCompanyClick = (name) => {
  Taro.showToast({
    title: `查看${name}招聘专场`,
    icon: "none",
    duration: 2000,
  });
};

// 底部链接点击
const handleFooterLinkClick = (title) => {
  Taro.showToast({
    title: `打开${title}页面`,
    icon: "none",
    duration: 2000,
  });
};
</script>
